<script>
import {listLeaf, listTypes} from "../../api/dict";
import {listByParam, pageResource} from "../../api/resource";
import ResourceCard from "./ResourceCard.vue";

export default {
    name: "TopMenu",
    components: {ResourceCard},
    props: {
        level: Number,
        current: {
            type: Number,
            default() {
                return 0
            }
        },
        list: {
            type: Array,
            default() {
                return [];
            }
        },
    },
    data() {
        return {
            children: [],
            active: 0,
            data: [],
            pageInfo:{
                current:1,
                size:20
            },
            page:{
                pages:0,
                total:0,
            },
            leaves:[]
        }
    },
    watch: {
        //列表改变 重新获取父分类的资源 current -> data
        list(val) {
            this.active = 0
            this.getTypeLeaf(this.current)
        },
    },
    methods: {
        //获取data
        itemClick(item) {
            if(this.active===item.id)
                return
            this.active = item.id
            //id 是0
            if (item.id === 0)
                this.children = null
            else
                listTypes(item.id, 'resType')
                    .then(res => {
                        if (res.code === 200)
                            this.children = res.data
                    })
            if (!this.children || this.children.length === 0) {
                var ids = []
                if (item.id === 0){
                    this.getTypeLeaf(this.current)
                }
                else if (!item.leaf){
                    this.getTypeLeaf(item.id)
                }
                else {
                    ids.push(item.id)
                    this.leaves=ids
                    this.getData(ids)
                }

            }

        },
        getData(ids) {
            this.pageInfo.typeId_in=ids
            listByParam(this.pageInfo)
                .then(res => {
                    if (res.code === 200) {
                        this.data = res.data.records;
                        this.page.pages=res.data.pages
                        this.page.total=res.data.total
                    }
                })
        },
        getTypeLeaf(id){
            listLeaf(id,"resType")
            .then(res=>{
                if (res.code===200){
                    var result=[]
                    res.data.forEach(v=>{
                        result.push(v.id)
                    })
                    this.leaves=result
                    this.getData(result)
                }
            })
        },
        handleSizeChange(size){
            this.pageInfo.size = size
            this.pageInfo.current = 1
            this.getData(this.leaves)
        },
        handleCurrentChange(cur){
            this.pageInfo.current = cur
            this.getData(this.leaves)
        }
    },
    mounted() {
        //新一级分类，要显示
        this.getTypeLeaf(this.current)
    }
}
</script>

<template>
    <div class="flex row" style="width: 100%;height: fit-content">
        <span class="menu-name">{{ level }}级目录:</span>
        <div class="flex row flex-warp">
            <span class="menu-item" @click="itemClick({id:0,leaf:false})" :class="active===0? 'menu-item-active' : ''">全部</span>
            <span class="menu-item" v-for="item in list" :key="item.id" @click="itemClick(item)"
                  :class="active===item.id ? 'menu-item-active' : ''">{{ item.name }}</span>
        </div>
    </div>
    <TopMenu v-if="children&&children.length>0" :current="active" :level="level+1" :list="children"/>
    <div v-else class="flex column">
        <div class="flex row flex-warp flex-start space-around card-item" >
            <ResourceCard style="margin: 10px 10px" v-for="res in data" :key="res.id" :value="res">{{ res.name }}</ResourceCard>
        </div>
        <div class="flex center align-center">
            <el-pagination
                style="margin-top: 50px"
                background
                layout="sizes, prev, pager, next"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-count="page.pages"
                :page-size="pageInfo.size"
                :current-page="pageInfo.current"
                :total="page.total"/>
        </div>
    </div>
</template>

<style scoped>
.menu-name {
    padding: 10px 0;
    width: 90px;
}

.menu-item {
    padding: 10px 10px;
    cursor: pointer;
}

.menu-item-active {
    color: #ff7e71;
}
.card-item{
    cursor: pointer;
    min-height: 100%;
    width: 100%;
    margin-top: 20px;

    border-radius: 15px;
}
</style>
